import React, { useState, useEffect } from 'react';
import './index.css';
import { history, request } from 'umi';
import { Button, Select, Radio, Input, Checkbox } from 'antd';
export default function index() {
  // 存放导航数据
  const [navdata, setnavdata] = useState([]);
  // 导航路由路径的填写
  const [navlujing, setnavlujing] = useState([]);
  // 存放他的路径
  const [lujing, setlujing] = useState('/home/stock');
  // 存放选中数据的id
  const [selectid, setselectid] = useState('');
  // 获取导航
  function handleChange(e) {
    setselectid(e);
    navlujing.map((res) => {
      if (res._id == e) {
        setlujing(res.url);
      }
    });
  }
  //换路径的链接
  function huanlujin(e) {
    setlujing(e.target.value);
  }
  const getMoudelList = () => {
    request('/api/moulePost', {
      method: 'get',
    }).then((res) => {
      res.mouduleList.sort((a, b) => {
        return a.desc - b.desc;
      });
      res.mouduleList.map((item3) => {
        item3.label = item3.MouduleName;
        item3.value = item3._id;
      });
      sessionStorage.setItem('navlianjie', JSON.stringify(res.mouduleList));
      setnavdata(res.mouduleList);
    });
  };
  // 保存按钮
  function baocun() {
    navdata.map((res) => {
      if (res._id == selectid) {
        res.url = lujing;
        console.log(res);
      }
    });
    sessionStorage.setItem('navlianjie', JSON.stringify(navdata));
  }
  useEffect(() => {
    getMoudelList();
    setnavlujing(JSON.parse(sessionStorage.getItem('navlianjie')));
  }, []);
  // 存放启动按钮的状态
  const [qi, setqi] = useState(true);
  // 启用按钮的打开与关闭
  function qiyong(e) {
    setqi(e.target.checked);
  }
  return (
    <div>
      <div>
        <Button className="user_btn">导航按钮</Button>
        <Button className="user_btn">连接线</Button>
        <Button className="user_btn">相关数据</Button>
        <Button className="user_btn">相关列表</Button>
        <Button className="user_btn">相关报表</Button>
        <Button className="user_btn" onClick={baocun}>
          保存
        </Button>
        <Button className="user_btn">水平对齐</Button>
        <Button className="user_btn">垂直对齐</Button>
      </div>
      <div className="Intelligencebody">
        <div className="Intelligencebodytop">
          功能模块：
          <Select
            defaultValue={'库存管理'}
            style={{ width: 210, height: 30 }}
            onChange={handleChange}
            options={navdata}
          />
        </div>
        <div className="Intelligencebodycenter">
          {/* <Radio onChange={()=>{qiyong}}>启用链接</Radio> */}
          <Checkbox onChange={qiyong} defaultChecked={qi}>
            启用链接
          </Checkbox>
        </div>
        <div
          className="Intelligencebodybuttom"
          style={{ display: qi ? '' : 'none' }}
        >
          链接地址：
          <Input
            style={{ width: '600px', height: '30px' }}
            value={lujing}
            onChange={huanlujin}
          />
        </div>
      </div>
    </div>
  );
}
